<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="审核状态:" prop="keyWord">
          <el-select v-model="query.state" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间:">
          <el-date-picker
            v-model="query.applyTime"
            type="date"
            placeholder="选择开始日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审批时间:">
          <el-date-picker
            v-model="query.grantTime"
            type="date"
            placeholder="选择开始日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="queryFun" v-no-more-click
            >搜索</el-button
          >
        </el-form-item>
      </el-row>
    </el-form>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column
        label="序号"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="empName"
        label="申请提现人"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="type"
        label="业务类型"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.type == 5">提现</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="approveName"
        label="审核人"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="bankName"
        label="收款银行"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        prop="bankNum"
        label="银行卡号"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        prop="state"
        label="状态"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.state == 0">申请中</span>
          <span v-if="scope.row.state == 1">提现成功</span>
          <span v-if="scope.row.state == 2">提现失败</span>
          <span v-if="scope.row.state == 3">取消提现</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="stateName"
        label="提现状态名"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column> -->

      <el-table-column
        prop="applyTime"
        label="申请时间"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="grantTime"
        label="审批时间"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="schoolTopic"
        label="审批时间"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column> -->
      <el-table-column
        prop="total"
        label="提现金额"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="typeName"
        label="进出账"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.typeName == 0">出账</span>
          <span v-if="scope.row.typeName == 1">进账</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="note"
        label="备注"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="ToView(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 审核弹窗! -->
    <el-dialog
      title="审核"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="false"
      ><el-col :span="12"
        >备 注
        <el-card
          ><el-input
            v-model="tableData.note"
            placeholder="请输入内容"
          ></el-input>
        </el-card>
      </el-col>
      审 核 意 见
      <el-col :span="12">
        <el-card>
          <el-select v-model="value" placeholder="请选择" @change="abc">
            <el-option
              v-for="item in wdState"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            >
            </el-option> </el-select
        ></el-card>
      </el-col>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="WithdrawalAudit">提交</el-button>
      </span>
    </el-dialog>
    <!-- 新增修改对话框 -->
  </div>
</template>

<script>
// import Treeselect from "@riophae/vue-treeselect";
// import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  withdrawalList,
  withdrawalState,
  WithdrawalAudit,
} from "../../../src/assets/js/api";
export default {
  name: "ContentList",
  components: {},
  data() {
    return {
      forumAccVoList: [], //表单-操作-查看按钮获取到的评论数据!
      wdState: [], //提现状态!
      dialogVisible: false,
      showHouse: false,
      row: null,
      eid: null, //对应人员id!
      showArticle: false,
      editVisible: false,
      title: "",
      total: 10, //总页数!
      pages: 0,
      id: null,
      contentId: false,
      loading: false,
      query: {
        pageSize: 10, //评论列表每页条数!
        pageNo: 1, //评论列表分页!
        applyTime: null, //申请时间!
        grantTime: null, //审批时间!
      },
      options: [
        {
          value: 0,
          label: "申请中",
        },
        {
          value: 1,
          label: "提现成功",
        },
        {
          value: 2,
          label: "提现失败",
        },
        {
          value: 3,
          label: "取消申请",
        },
      ],
      value: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      columnId: [{ itemValue: null, itemText: "不限" }],
      accountData: [],
      tableData: [], //评论列表所有数据!

      whetherState: [],
      deleteStatus: [],
      golbalPermissions: null,
      currentPage: 1,
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.label,
          children: node.children,
        };
      },
    };
  },
  created() {
    this.withdrawalList(); //评论列表!
  },
  methods: {
    WithdrawalAudit() {
      WithdrawalAudit({
        eid: this.eid,
        id: this.id,
        note: this.tableData.note,
        state: this.row,
      }).then((res) => {
        let message = res.message;

        if (res.code == 200) {
          this.$message({ message: message, type: "success" });
          this.dialogVisible = false;
          this.withdrawalList();
        } else {
          this.$message.error(message);
        }
        this.withdrawalList();
      });
    },
    abc(row) {
      this.row = row;
    },

    // 获取评论表单数据!
    withdrawalList() {
      withdrawalList(this.query).then((res) => {
        let { records } = res.data;
        this.tableData = records; //数据列表!
        this.total = res.data.total; //获取总数据条数!
        this.query.applyTime = records.applyTime; //申请时间!
        this.query.grantTime = records.grantTime; //审批时间!

        // this.query.audit = records.audit//审核状态!
        // this.tableData = records//数据列表!
        // // 0 1
        // this.total = res.data.total//数据总条数!
      });
    },

    //查看按钮!
    ToView(row) {
      this.id = row.id;
      this.eid = row.eid;

      withdrawalState().then((res) => {
        this.wdState = res.data;
      });

      this.dialogVisible = true;
    },

    //关闭弹窗
    closeDia() {
      this.showArticle = false;
      this.showHouse = false;
    },

    // 搜索功能
    queryFun() {
      this.query.pageNo = 1;
      this.withdrawalList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.withdrawalList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.withdrawalList();
    },
  },
  //监听删除数据如果是这一页的最后一条数据，返回上一页
  watch: {
    total: function () {
      if (
        this.total == (this.query.pageNo - 1) * this.query.pageSize &&
        this.totalotal != 0
      ) {
        this.query.pageNo -= 1;
        this.getList(); //获取列表数据
      }
    },
  },
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}
::v-deep .el-table th {
  padding: 10px 0;
}
.query ::v-deep .el-input__inner {
  height: 32px;
}
.query ::v-deep .el-input__icon {
  line-height: 32px;
}
.query ::v-deep .el-form-item {
  width: 320px;
}
.query ::v-deep .el-form-item__content {
  width: 210px;
}
.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}
.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}
.el-col-24 ::v-deep .el-form-item,
.el-col-24 ::v-deep .el-form-item__content {
  width: 100%;
}
::v-deep .btn .el-button {
  width: 80px;
  height: 32px;
  line-height: 0;
}
::v-deep .el-table th > .cell {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}
.box {
  position: relative;
  background: #fff;
  padding: 20px 20px 50px 20px;
}
::v-deep .el-pagination {
  position: absolute;
  margin-top: 20px;
  right: 0;
}
::v-deep .el-pagination__total {
  visibility: hidden;
}
.title {
  position: absolute;
  left: 0;
  margin-top: 15px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 21px;
}
.inputTxt {
  height: 30px;
  border: 3px solid #dcdfe6;
  border-radius: 10px;
}
</style>
